<!--
 * @Description: 
 * @Author: sanghx
 * @Date: 2020-07-08 10:11:52
 * @LastEditors: sanghx
 * @LastEditTime: 2020-07-08 14:43:48
--> 
<template>
  <div ref="pie" class="chartsdom"></div>
</template>

<script>
export default {
  name: "Pie",
  props: ["echartData"],
  mounted() {
    let option = {
      color: ["#019CFF", "#33C74D", "#F7E71B", "#19D6EC"],
      tooltip: {
        trigger: "item",
        formatter: "{b} : {c} ({d}%)"
      },
      calculable: true,
      series: [
        // 中心环
        {
          type: "pie",
          radius: ["16%", "17%"],
          hoverAnimation: false,
          labelLine: {
            normal: {
              show: false,
              length: 30,
              length2: 55
            },
            emphasis: {
              show: false
            }
          },
          data: [
            {
              name: "",
              value: 0,
              itemStyle: {
                normal: {
                  color: "#0B4A6B"
                }
              }
            }
          ]
        },
        // 中心圆
        {
          type: "pie",
          radius: ["0%", "13%"],
          hoverAnimation: false,
          labelLine: {
            normal: {
              show: false,
              length: 30,
              length2: 55
            },
            emphasis: {
              show: false
            }
          },
          data: [
            {
              name: "",
              value: 0,
              itemStyle: {
                normal: {
                  color: "#3A496D"
                }
              }
            }
          ]
        },
        // 外环
        {
          type: "pie",
          radius: ["60%", "61%"],
          hoverAnimation: false,
          labelLine: {
            normal: {
              show: false,
              length: 30,
              length2: 55
            },
            emphasis: {
              show: false
            }
          },
          name: "",
          data: [
            {
              name: "",
              value: 0,
              itemStyle: {
                normal: {
                  color: "#0B4A6B"
                }
              }
            }
          ]
        },
        {
          stack: "a",
          type: "pie",
          radius: ["20%", "50%"],
          roseType: "area",
          zlevel: 10,
          label: {
            normal: {
              show: true,
              formatter: function(params) {
                return params.value + "\n" + params.name;
              },
              textStyle: {
                fontSize: 16
              },
              position: "outside"
            },
            emphasis: {
              show: true
            }
          },
          labelLine: {
            normal: {
              show: true,
              length: 20,
              length2: 55,
              lineStyle: {
                width: 3
              }
            },
            emphasis: {
              show: false
            }
          },
          data: this.echartData
        }
      ]
    };
    this.getEchart(option);
  },
  methods: {
    getEchart(option) {
      let myChart = this.$echarts.init(this.$refs.pie);
      myChart.setOption(option);
    }
  }
};
</script>

<style scoped>
.chartsdom {
  width: 25rem;
  height: 15.625rem;
}
</style>